<!DOCTYPE html>
<html>
    <head>
        <title>Slides of elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("div").click(function() {
                    var speed = 700;
                    $(this).fadeOut(speed, function() {
                        $(this).fadeIn(speed);
                    })
                });
            });
        </script>
    </head>
    <body>

        <h1>Click one box</h1>

        <div id="firstDiv" style="position: absolute; left: 100px; top: 100px ; width: 100px; padding: 20px;background-color: lime; border-width: 1px; border-color: black; border-style: solid" >


        </div>
        <div id="secondDiv" style="position: absolute; left: 250px; top: 100px ; width: 100px; padding: 20px;background-color: appworkspace; border-width: 1px; border-color: black; border-style: solid" >


        </div>
        <div id="thirdDiv" style="position: absolute; left: 400px; top: 100px ; width: 100px; padding: 20px;background-color: azure; border-width: 1px; border-color: black; border-style: solid" >


        </div>
        <div id="fourthDiv" style="position: absolute; left: 550px; top: 100px ; width: 100px; padding: 20px;background-color: steelblue; border-width: 1px; border-color: black; border-style: solid" >


        </div>
    </body>
</html>
